<template>
    <div class=" cursor-pointer">
      <box title="告警确认">
        <div class="h-[116px] flex justify-between items-center">
          <div class="flex-1 flex place-content-center" v-for="(item, index) in
                          countAllList" :key="item.name" @click="item.clickFun()">
            <div class="w-[48px] h-[50px] ">
              <el-image class="w-[48px] h-[48px]" :src="item.img">
              </el-image>
            </div>
            <div class="h-[50px] pl-[18px]">
              <div class="alltext">{{ isNullOrEmpty( item.name ) }}</div>
              <div class="gradients-text text-[26px] pt-[13px]" v-if="item.number <= 999">{{ isNullOrEmpty( item.number ) }}</div>
              <div class="gradients-text text-[26px] pt-[13px]" v-else>999+</div>
            </div>
          </div>
        </div>
      </box>
    </div>
  </template>
  <script setup>
import { isNullOrEmpty } from '@/utils/functions'
  import box from '@/views/large-data-screen/component/box.vue'
  import {superviseconfirm} from '@/api/screen/largeData'
  import {useDataDashboardThemeStore} from '@/store/modules/data-dashboard-theme'
  import { showSuperviseAlarm, } from '@/views/large-data-screen/utils/index'
  import img2 from '@/assets/screenimg/sup6@2x.png'
  import img3 from '@/assets/screenimg/sup7@2x.png'
  
  const useDataDashboardTheme = ref()
  
  const countAllList = ref([
  
    {
      name: '全部(个)',
      number: 0,
      img: img2,
      clickFun: () => showSuperviseAlarm()
    },
    {
      name: '项目(个)',
      number: 0,
      img: img3,
      clickFun: () => showSuperviseAlarm()
    }
  ])
  
  onMounted(() => {
    getscreenproject()
  })
  //项目概况
  
  const getscreenproject = () => {
    superviseconfirm().then(res => {
       console.log("确认", res);
       countAllList.value[0].number = res.result.total
       countAllList.value[1].number = res.result.projectCount
  
    })
  }
  </script>
  <style scoped lang="scss"></style>
  